<template>
  <div class="refine_tpcreate">
    <h2>{{title}}</h2>
    <el-form :disabled="formDisabled" :inline="true" ref="form" :model="form" label-width="100px">

      <!--   <el-row :gutter="24" v-if="type!='add'">
          <el-form-item label="任务编号">
              <el-input disabled v-model="form.code"></el-input>
          </el-form-item>
      </el-row>-->
      <el-row :gutter="24">
        <el-form-item label="计划名称" :rules="[{ required: true, message: '计划名称不能为空'}]">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建人" class="tpfr">
          <el-input disabled v-model="form.userName" placeholder="" class=" bgcolor-ccc"></el-input>
        </el-form-item>
      </el-row>

      <el-row :gutter="24">
        <el-form-item label="计划任务" :rules="[{ required: true, message: '时间不能为空'}]">
          <el-radio-group v-model="form.datetype">
            <el-radio :label="0">系统定义</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="专项" class="tpfr">
          <el-checkbox v-model="form.special">是</el-checkbox>
        </el-form-item>
      </el-row>

      <el-row :gutter="24" class="margin80" v-if="form.datetype=='0'">
        <el-form-item label="">
          <el-select v-model="form.tplansel" placeholder="">
            <el-option label="月度计划" value="month"></el-option>
            <el-option label="季度计划" value="season"></el-option>
            <el-option label="年度计划" value="year"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker v-model="form.starttime" type="datetime" placeholder="" value-format='yyyy-MM-dd HH:mm:ss'
                          align="right">
          </el-date-picker>
        </el-form-item>
      </el-row>

      <el-row :gutter="24" class="margin80" v-if="form.datetype=='1'">
        <el-form-item label="">
          <el-date-picker v-model="form.definitiontime" type="daterange" :picker-options="pickerOptions1"
                          range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期" value-format='yyyy-MM-dd' align="right">
          </el-date-picker>
        </el-form-item>
      </el-row>

      <el-row :gutter="24">
        <el-form-item label="任务类型" :rules="[{ required: true, message: '任务类型不能为空'}]">
          <el-select v-model="form.type1" placeholder="" class="fl" style="margin-right: 14px;"
                     :disabled="formDisabled"
                     @change="typeChange($event)">
            <el-option v-for="item in taskType" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <div class="fl" style="margin-right: 14px;">
            <el-select v-model="form.type2" placeholder="" class="w98" :disabled="formDisabled"
                       @change="typeChange2($event)">
              <el-option v-for="item in taskType2" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="fl" style="margin-right: 14px;">
            <el-select v-model="form.type3" placeholder="" class="w98" :disabled="formDisabled">
              <el-option v-for="item in taskType3" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-row>

      <el-row :gutter="24">
        <el-form-item label="任务数量" :rules="[{ required: true, message: '任务数量不能为空'}]">
          <el-select v-model="form.tpbnumber" placeholder="">
            <el-option v-for="item in numType" :key="item.value" :label="item.label" :value="item.value"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="" class="width300">
          <el-input v-model="form.number" placeholder=""></el-input>
          个
        </el-form-item>
      </el-row>
      <el-row :gutter="24" class="checkgroup">
        <el-form-item label="任务分配" :rules="[{ required: true, message: '任务分配不能为空'}]">
          <el-col :span="12" v-for="(item,index) in unit" :key='index'>
            <el-checkbox :label="item.name" name="tpallot" v-model='item.choose'></el-checkbox>
            <el-input v-model="item.num"></el-input>
          </el-col>
        </el-form-item>
      </el-row>

      <el-row :gutter="24" class="range">
        <el-form-item label="完成期限" :rules="[{ required: true, message: '任务完成期限不能为空'}]">
          <!-- <el-date-picker v-model="form.range" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" :file-list="fileList" value-format='yyyy-MM-dd HH:mm:ss' align="right">
          </el-date-picker> -->
          <el-date-picker v-model="form.periodEnd" type="datetime" value-format='yyyy-MM-dd HH:mm:ss' placeholder=""
                          :picker-options="pickerOptions1">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row :gutter="24" v-if="title!='新建计划任务'">
        <div class="grid-content">
          <el-form-item label='参考文件'>
            <a class="annex-width" v-for="(item, index) in fileImg" :key="index" target="_blank" :href="item" download="fileImg">
              {{item.substring(item.lastIndexOf('plans/') + 6, item.length)}}
            </a>

          </el-form-item>
        </div>
      </el-row>
      <el-row :gutter="24" v-if="formDisabled==false">
        <el-form-item label="参考文件">
          <el-upload class="upload-demo" ref="upload" :action="$config.FILE_UPLOAD_URL" :data='uploadobj'
                     :headers="headers" :limit="1" accept='.txt,.doc,.docx,.jpg,.png' multiple :file-list="fileList"
                     :before-upload='beforeupload' :on-success='uploadSuccess' :on-remove="uploadRemove"
                     :on-exceed="handleExceed">
            <el-button size="small" type="primary">上传</el-button>
            <div slot="tip" class="el-upload__tip">上传附件</div>
          </el-upload>
        </el-form-item>
      </el-row>

      <el-row :gutter="24" class="checkgroup chcgroup" v-if="">
        <el-form-item label="抄送">
          <el-col :span="24">
            <el-col :span="4" v-if="Zero.length!=0">
              <div class="grid-content groupli copylist">
                <p>局领导</p>
                <el-checkbox v-model="checkZero" @change="nodeChange('zeroTree', 'Zero')" class="allchck">全选
                </el-checkbox>
                <el-tree
                  :data="Zero"
                  show-checkbox
                  node-key="id"
                  @check-change="treeChange('zeroTree')"
                  ref="zeroTree"
                  highlight-current
                  :props="defaultProps"
                  accordion>
                </el-tree>
              </div>
            </el-col>
            <el-col :span="4" v-if="One.length!=0">
              <div class="grid-content groupli copylist">
                <p>业务部门</p>
                <el-checkbox v-model="checkOne" @change="nodeChange('oneTree', 'One')" class="allchck">全选</el-checkbox>
                <el-tree
                  :data="One"
                  show-checkbox
                  node-key="id"
                  @check-change="treeChange('oneTree')"
                  ref="oneTree"
                  highlight-current
                  :props="defaultProps"
                  accordion>
                </el-tree>
              </div>
            </el-col>
            <el-col :span="4" v-if="Two.length!=0">
              <div class="grid-content groupli copylist">
                <p>行政部门</p>
                <el-checkbox v-model="checkTwo" @change="nodeChange('twoTree', 'Two')" class="allchck">全选</el-checkbox>
                <el-tree
                  :data="Two"
                  show-checkbox
                  node-key="id"
                  @check-change="treeChange('twoTree')"
                  ref="twoTree"
                  highlight-current
                  :props="defaultProps"
                  accordion>
                </el-tree>
              </div>
            </el-col>
            <el-col :span="4" v-if="Three.length!=0">
              <div class="grid-content groupli copylist">
                <p>海事处</p>
                <el-checkbox v-model="checkThree" @change="nodeChange('threeTree', 'Three')" class="allchck">全选
                </el-checkbox>
                <el-tree
                  :data="Three"
                  show-checkbox
                  node-key="id"
                  @check-change="treeChange('threeTree')"
                  ref="threeTree"
                  highlight-current
                  :props="defaultProps"
                  accordion>
                </el-tree>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content groupli copylist">
                <div>自定义抄送
                  <div class="copybtn fr" @click="cusClick">自定义</div>
                </div>
                <el-checkbox v-model="checkCustom" @change="nodeChange('customTree', 'Custom')" class="allchck">全选
                </el-checkbox>
                <el-tree
                  :data="Custom"
                  show-checkbox
                  node-key="id"
                  @check-change="treeChange('customTree')"
                  ref="customTree"
                  highlight-current
                  :props="defaultProps"
                  accordion>
                </el-tree>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content groupli copylist">
                <p>抄送人数共计{{copylistP.length}}人</p>
                <ul v-for="(item,index) in copylistP" :key='index'>
                  <li>{{item.label}}</li>
                </ul>
              </div>
            </el-col>
          </el-col>
        </el-form-item>
      </el-row>
      <!--<el-row :gutter="24" v-if="formDisabled==true&&copylistP!=''" class="csdiv">-->
      <!--<el-form-item label="抄送">-->
      <!--<el-col :span="8" v-for="(item,index) in copylistP" :key='index' class="copyli">-->
      <!--{{item}}-->
      <!--</el-col>-->
      <!--</el-form-item>-->
      <!--</el-row>-->

      <el-row :gutter="24" style="text-align: center;" v-if="!formDisabled">
        <el-form-item>
          <el-button type="primary" @click="creatsure" class="sure">确认</el-button>
          <el-button class="cancel" @click="creatcancel">取消</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-dialog title="" :visible.sync="dialogVisible" width="80%" append-to-body class="copyGroup task-content">
            <span>
                <h2 class="titleblue">创建抄送组</h2>
                <div class="contant">
                    <el-form :model="ruleForm" ref="rule" label-width="100px">
                        <el-row :gutter="24">
                            <el-form-item label="群组名称" prop="name" class="group-name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row :gutter="24">
                            <el-form-item label="添加群成员">
                              <x-tree title="抄送组" ref="outlan" :groupData.sync="groupData" :treeList2.sync="treeList2"></x-tree>
                            </el-form-item>
                        </el-row>
                        <el-row :gutter="24">
                            <el-form-item class="footerbtn">
                                <el-button type="primary" @click="copysure" class="sure">添加</el-button>
                                <el-button class="cancel" @click="copycancel">取消</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </span>
    </el-dialog>
  </div>
</template>

<script src="./CreateScheduleTask.js">
</script>

<style lang="scss">
  .refine_tpcreate {
    h2 {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #eeeeee;
      font-weight: normal;
      font-size: 18px;
      color: #0062cd;
      padding-left: 30px;
      box-sizing: border-box;
    }

    .width-100 {
      .el-form-item {
        width: 100%;

        .el-form-item__content {
          width: 80%;
        }
      }
    }

    .el-checkbox-group {
      font-size: 0;
      box-sizing: border-box;
      height: 300px;

      label {
        width: 100%;
        margin-left: 0;
        float: left;
        height: 30px;

      }
    }

    .checkgroup {
      .el-checkbox {
        padding: 0;
        float: left;
      }

      .el-checkbox__input {
        display: inline-block;
      }

      .el-checkbox__label {
        display: inline-block;
        max-width: 90%;
        vertical-align: -4px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 5px;
      }

      .el-col {
        padding-left: 0px !important;
        padding-right: 10px !important;
      }

      .groupli {
        border: 1px solid #ddd;
        height: 400px;
        padding-left: 2px !important;

        P {
          font-size: 14px;
          line-height: 30px;
        }

        li {
          line-height: 30px;
          border-bottom: 1px solid #ddd;
        }

        .is-leaf {

        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding: 0px;
        }

        .el-tree-node {
          width: 100%;
          float: left;
          display: inline-table;
        }
      }

      .copylist {
        overflow-y: auto;
      }


    }

    .chcgroup {
      .el-form-item__content {
        box-sizing: border-box;
        border: none;
        padding: 0;
      }
    }

    .csdiv {

      .el-form-item {
        width: 100%
      }

      .el-form-item__content {
        width: 88%;
        border: 1px solid #ddd;
        padding: 10px;
        box-sizing: border-box;
      }
    }

    .copybtn {
      width: 50px;
      height: 20px;
      background-color: #0062cd;
      border-radius: 4px;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      margin-top: 10px;
      margin-right: 2px;
    }

    .el-tree__empty-block {
      margin-top: 30px;
    }
  }

  @media only screen and (max-width: 1200px) {
    .refine_tpcreate {
      .select-width-220 {
        width: 120px !important;
      }

      .checkgroup .el-form-item__content {
        width: 80%
      }

      .csdiv .el-form-item__content {
        width: 80%
      }
    }
  }
</style>
